<template>
  <div style="app">
    <div class="title">
      <!-- Header -->
      <mt-header
        class="qqqqq"
        title="Tokyo2020"
        style="
          font-size:22px;
          font-family: Georgia;
        "
      >
        <div style="font-size:12px;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" slot="right" v-if="$store.state.islogin">欢迎：{{$store.state.username}}</div>        
        <router-link v-else to="/login" slot="right">
          <mt-button style="font-size:14px">登录</mt-button>
        </router-link>
        <mt-button icon="more" slot="left" @click="upList"></mt-button>
      </mt-header>
    </div>
    <!-- 导航栏 -->
    <van-tabs v-model="active" scrollspy sticky bind:change="news">
        <mt-swipe
          :auto="4000"
          :speed="200"
          :style="{ height: h }"
          class="mtswipe"
        >
          <mt-swipe-item v-for="(item,i) in lunbo" :key="i">
            <img :src="`${item.lunbophoto}`" alt="" />
          </mt-swipe-item>
        </mt-swipe>
        <!-- <div class="time">
          当前时间：{{ date }}
        </div> -->
        <!-- 火热头条 -->
        <van-tab title="头条">
        <van-divider content-position="left" style="font-size:20px;" :style="{ color: 'red', borderColor: 'red', padding: '0 16px' }">火热头条</van-divider>
        <div>
            <ul>
              <li style="margin-top:10px" v-for="(item,i) in hotTop" :key="i">
                <router-link :to="`/hottop?did=${item.hid}`">
                  <a class="label" href="javascript:;"></a>
                  <a class="toutiao" href="javascript:;">
                    <p style="text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{item.htitle}}</p>
                  </a>
                </router-link>
              </li>
            </ul>
          </div>
        </van-tab>
      
        <!-- <van-divider :style="{ color: 'red', borderColor: 'red', padding: '0 16px' }" style="font-size:20px">全部新闻</van-divider> -->
        <!-- 新闻 -->
        <!-- <div>
          <ul class="newsUl">
            <li class="newsLi" v-for="(item,i) in news" :key="i">
              <router-link :to="`/article?articleid=${item.newsid}`" style="color:black">
                <img :src="`${item.newsphoto}`" alt="">
                <h3 style="margin:10px 0px 10px 18px;text-align:left">{{item.newsitem}}</h3>
                <p>{{item.newstitle}}</p>
                <span>{{item.newstime}}</span>
              </router-link>
            </li>
          </ul>
        </div> -->
      <!-- 奖牌排行榜 -->
      <van-tab title="奖牌" class="jiangpai">
        <h2 style="margin-top:80px">Paralympic Medal Count</h2>
        <table style="border-collapse: collapse;" width="100%">
          <thead style="background-color: rgb(228, 86, 89)">
            <tr>
              <th>Rank</th>
              <th>Team/NPC</th>
              <th>
                <img src="../assets/1.png" alt="" />
              </th>
              <th>
                <img src="../assets/2.png" alt="" />
              </th>
              <th>
                <img src="../assets/3.png" alt="" />
              </th>
              <th>Total</th>
              <th>Rank by Total</th>
            </tr>
          </thead>
          <!-- 排行榜内容 -->
          <tbody class="rowColor">
            <tr v-for="(item,i) in medai" :key="i">
              <td>{{ item.jiangpaiid }}</td>
              <td style="text-align:left">
                <img width="30px" :src="`${item.countryhead}`" alt="" />
                {{item.country}}
              </td>
              <td>{{ item.gold }}</td>
              <td>{{ item.silver }}</td>
              <td>{{ item.bronze }}</td>
              <td>{{ item.total }}</td>
              <td>{{ item.count }}</td>
            </tr>
          </tbody>
        </table>
      </van-tab>
      <!-- 运动项目 -->
      <van-tab title="项目">
        <h2 style="margin-top:80px" class="sportsText">Paralympic Sports</h2>
        <ul class="ParalympicSports">
          <li class="sportsBox" v-for="(item,i) in sports" :key="i">
            <a class="SportsA">
              <div class="Sports" >
                <img :src="`${item.runphoto}`" alt="">
                <span>{{item.runitem}}</span>
              </div>
            </a>
          </li>
        </ul>
      </van-tab>
      <!-- 运动员 -->
      <van-tab title="运动员">
        <h2 style="text-align:center;margin-top:80px">Paralympic Athletes</h2>
        <table width="100%" style="border-collapse: collapse;">
            <tr style="background-color: rgb(228, 86, 89)">
              <th>Name</th>
              <th>NPC</th>
              <th>Discipline</th>
            </tr>
            <tbody class="athletesBox">
              <tr v-for="(item,i) in runer" :key="i" class="">
                <td class="athletes">
                  <img style="width:50px" :src="`${item.runerphoto}`" alt="">
                  <span>{{item.runername}}</span>
                </td>
                <td class="countryTd">
                  <img style="width:50px" :src="`${medai[i+1].countryhead}`" alt="">
                  <span>{{medai[i+1].country}}</span>
                </td>
                <td class="sportsTd">
                  <img style="width:50px" :src="`${sports[i].runphoto}`" alt="">
                  <span>{{sports[i].runitem}}</span>
                </td>
              </tr>
            </tbody>
        </table>
        <div style="width:320px;margin:auto;">
          <van-pagination style="margin-top:2px" v-model="currentPage" :total-items="24" :items-per-page="5" />
        </div>
      </van-tab>
      <!-- NPC -->
      <!-- <van-tab title="NPC">
        <div class="beijing">
          <h2 style="text-aline:center;margin-top:80px">NPCs List</h2>
        </div>
        <ul class="npcUl">
          <li class="npcLi" v-for="(item,i) in medai" :key="i">
            <a href="javascript:;">
              <img style="width:100px" :src="`${medai[i].countryhead}`" alt="">
              <span>{{medai[i].country}}</span>
            </a>
          </li>
        </ul>
      </van-tab> -->
    </van-tabs>
    
    <div style="background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);background-blend-mode: screen;padding-top:10px">
      <div style="text-align:center;">
        <router-link to="/product">
          <img src="../assets/纪念商品.jpg" alt="">
        </router-link>
      </div>
      <!-- 2020年东京残奥会金牌合作伙伴 -->
      <div>
        <div>
          <h3 style="text-align: center;margin-bottom:10px">2020年东京残奥会金牌合作伙伴</h3>
        </div>
        <div class="partners">
          <ul class="partnersUl">
            <li class="partnersLi">
              <a href="javascript:;">
                <img style="margin-top:15px" src="../assets/alibaba.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:15px" src="../assets/asahi.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/asics.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/canon.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/eneos.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:12px" src="../assets/fujitsu.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="width:30px;margin-top:15px" src="../assets/ge.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/lixil.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/meiji.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/mizuho.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/nec.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/nissay.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/nomura.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/ntt.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:15px" src="../assets/omega.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="width:30px;margin-top:15px" src="../assets/peg.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/smbc.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/tokyo-marine.svg" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img style="margin-top:20px" src="../assets/fudosan.svg" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 关注残奥会 -->
      <div class="follow">
        <div>
          <h3>关注残奥会</h3>
        </div>
        <div>
          <ul class="followUl">
            <li class="followLi">
              <a href="javascript:;">
                <img src="../assets/facebook.svg" alt="">
              </a>
            </li>
            <li class="followLi">
              <a href="javascript:;">
                <img src="../assets/twitter.png" alt="">
              </a>
            </li>
            <li class="followLi">
              <a href="javascript:;">
                <img src="../assets/instagram.png" alt="">
              </a>
            </li>
            <li class="followLi">
              <a href="javascript:;">
                <img src="../assets/youtube.png" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- footer -->
      <div class="footer">
        <div class="d1">
          <a href="javascript:;">
            <img src="../assets/GooglePlay.svg" alt="">
          </a>
        </div>
        <div class="d2">
          <a href="javascript:;">
            <img src="../assets/AppStore.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <!-- 返回顶部小火箭 -->
    <div v-if="goTop" class="fixed">
      <a @click="top">    
         <!-- :style="`${goTop}`" -->
        <img src="../assets/TOP.png" alt="">
      </a>
    </div>

    <!-- 底部Tabbar -->
    <mt-tabbar v-model="tabbars" fixed style="color:#bfbfbf;border-top:1px solid #bfbfbf">
      <mt-tab-item
        id="首页"
        style="
          background-color:#fff;
        "
      >
        <img slot="icon" src="../assets/首页(1).svg" />
        <strong style="color:rgb(248, 62, 62);">首页</strong>
      </mt-tab-item>
      <mt-tab-item
        id="周边"
        style="
          background-color: #fff;
        "
      >
        <img slot="icon" src="../assets/商城.svg" />
        <strong>周边</strong>
      </mt-tab-item>
      <mt-tab-item
        id="购物车"
        style="
          background-color: #fff;
        "
      >
        <img slot="icon" src="../assets/购物车.svg" />
        <strong>购物车</strong>
      </mt-tab-item>
      <mt-tab-item
        id="我的"
        style="
          background-color: #fff;
        "
      >
        <img slot="icon" src="../assets/我的.svg" />
        <strong>我的</strong>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      h: "210px",
      date: new Date(),
      active: 0,
      selected: "1",
      tabbars: "首页",
      lunbo:[],
      hotTop:[],
      // news: [],
      medai:[],
      sports:[],
      runer:[],
      currentPage:1,
      goTop:true,
      p:'none',
      // goTop:'display:none',
    };
  },
  watch: {
    tabbars() {
      if (this.tabbars == "周边") {
        this.$router.push("/product");
      } else if (this.tabbars == "购物车") {
        this.$router.push("/cart");
      } else if (this.tabbars == "我的") {
        this.$router.push("/me");
      }
    },
  },
  mounted() {
      let that = this;
    this.timer = setInterval(function () {
      that.date = new Date().toLocaleString();
    });
    this.initSwipeHeight();
    axios.get("/home").then((res) => {
      // console.log(res.data);
      this.lunbo = res.data.lunbo;
      this.hotTop = res.data.head;
      this.medai=res.data.jiangpai;
      this.sports = res.data.run;
      this.runer=res.data.runer;
    });
    
  },
  methods: {
    //初始化轮播图的高度
    initSwipeHeight() {
      //重新根据当前屏幕宽度计算轮播图容器的高度值
      let picw = 1340;
      let pich = 700;
      let screenw = window.screen.width;
      let swipeh = Math.floor((pich * screenw) / picw) + "px";
      this.h = swipeh;
    },
    upList(){
      if(this.p=='none'){
        this.p='block';
      }else if(this.p=='block'){
        this.p='none'
      }
    },
    top(){
      let timer='';
      clearInterval(timer);
      timer=setInterval(function(){
        if(window.pageYOffset != 0){
          // this.goTop='display:block';
          window.scroll(0,Math.max(window.pageYOffset-50,0));
        }else{
          clearInterval(timer)
        }
      },10)
    },
  },
  created() {},
};
</script>
<style scoped>
.bla{
  color: #ffffff;
}
.qqqqq{
  background-color: rgb(248, 62, 62);
}
/* 轮播图宽度 */
.mtswipe img {
  width: 100%;
}
/* 动态时间 */
.time {
  color: rgb(105, 104, 104);
  font-size: 22px;
  font-family: "Lucida Bright";
  /* border: 1px solid rgb(209, 93, 93); */
  width: 80%;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  /* box-shadow: 5px 5px 5px 3px #999; */
  box-shadow:2px 2px 4px #777474, -3px -1px 7px #666464;
}
/* 火热头条 */
.label{
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: rgb(236, 104, 104);
  position: relative;
  top:-3px
}
.toutiao{
  width: 333px;
  height: 22px;
  font-size: 18px;
  margin-left: 8px;
  color: black;
  font-weight: 600;
  font-family: "微软雅黑";
}
.toutiao p{
  display: inline-block;
  width: 85%;
  margin: 0px;
}
/* 新闻 */
.newsUl{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.newsLi{
  width: 330px;
  border-bottom: 1px solid #999;
  margin-top: 10px;
  /* background-color: yellow; */
}
.newsLi a img{
  width: 100%;
  height: 187px;
}
.newsLi a p{
  width: 300px;
  position: relative;
  left: 18px;
  text-align: left;
}
.newsLi a span{
  position: relative;
  right: -100px;
}
/* 奖牌排行榜 */
.jiangpai{
  text-align: center;
}
.rowColor tr:nth-child(odd) {
  background-color: rgb(233, 232, 232);
}
/* 运动项目 */
.sportsText{
  text-align: center;
}
.sportsBox{
  width: 33.33%;
  height: 27%;
  float: left;
  /* background-color: royalblue; */
}
.ParalympicSports:after{
  content:"";
  display:block;
  clear:both;
}
.SportsA{
  text-align: center;
}
.Sports img {
  width: 90px;
  margin-top: 10px;
}
.Sports span {
  display: block;
}
/* 运动员 */
.athletesBox tr:nth-child(odd){
  background-color: rgb(248, 246, 246);
}
.athletes{
  height: 90px;
}
.athletes span{
  display: block;
  margin-bottom: 0px;
}
.countryTd span{
  display: block;
  margin-bottom: -25px;
}
.sportsTd img{
  margin-top: -25px;
}
.sportsTd span{
  display: block;
  margin-bottom: -35px;
}
/* NPC */
.npcUl:after{
  content:"";
  display:block;
  clear:both;
}
.npcLi{
  width: 33.33%;
  height: 110px;
  float: left;
  /* background-color: rgb(117, 117, 119); */
}
.npcLi span{
  color: black;
  display: block;
  font-size: 20px;
  /* margin-bottom: 0px; */
}
/* 2020年东京残奥会金牌合作伙伴 */
.partnersUl{
  margin-left: 2%;
}
.partnersUl::after{
  content:"";
  display:block;
  clear:both;
}
.partnersUl li{
  width: 24%;
  height: 60px;
  float: left;
  text-align: center;
  line-height: 60px;
  margin-top: 1px;
  /* border: 2px solid #999; */
}
.partnersUl a{
  display: block;
  width: 95%;
  height: 55px;
  margin-left: 3%;
  margin: 1px 1px;
  border: 2px solid rgb(226, 225, 225); 
}
.partnersUl img{
  width: 60px;
}
/* 关注残奥会 */
.follow h3{
  text-align: center;
  margin-bottom: 10px;
}
.followUl{
  display: flex;
  justify-content:center;
}
.followUl:after{
  content:"";
  display:block;
  clear:both;
}
.followLi{
  width: 164px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  float: left;
  display: flex;
  justify-content:center;
  /* border-right: 1px solid #999; */
}
.followLi img{
  width: 30px;
}
/* footer */
.footer{
  display: flex;
  justify-content:center;
  margin-bottom: 55px;
}
.footer .d1{
  width: 148.5px;
}
.footer .d2{
  width: 132px;
}
.footer img{
  height: 44px;
}
/* 返回顶部小火箭 */
.fixed{
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 40px;
  height: 40px;
  /* background: #999; */
  border-radius: 10px;
}
.fixed img{
  width: 35px;
  height: 35px;
  margin-top: 3px;
}
/* 列表 */
.list{
  position: fixed;
  top: 40px;
  width: 100px;
  height: 300px;
  background-color: white;
  border: 1px solid #999;
  z-index: 100;
}
.list li{
  margin-top: 15px;
  font-weight: 500;
}
.list li a{
  color: black;
}
</style>